/**
 * Created by YJH on 2018/5/24.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    TouchableOpacity,
    Image,
    WebView,
} from 'react-native';
import NavigationBarUtil from '../../util/NavigationBarUtil';
import NavigationBarComponent from '../NavigationBarComponent'
import FavoriteDao from '../../expand/dao/FavoriteDao';
import DataRespository, {FLAG_STORAGE} from '../../expand/dao/DataRespository';
import Backforward from '../../common/Backforward';

const TRENDING_URL = 'https://github.com/';
/** 主页面listview列表的item 的详情*/
export default class RepositoryDetailPage extends Component {

    constructor(props) {
        super(props);
        //实现对android手机返回按钮的监听返回功能
        this.backforward = new Backforward({backforward: (e) => this.onBackforward(e)});
        this.isTrending = this.props.isTrending;
        this.favoriteDao = new FavoriteDao(this.isTrending ? FLAG_STORAGE.flag_trending : FLAG_STORAGE.flag_popular);
        this.favorite = this.props.projectModule.isFavorite;
        this.starIcon = this.favorite ? require('../../../res/images/ic_star.png')
            : require('../../../res/images/ic_unstar_transparent.png');
        this.goodIcon = this.favorite ? require('../../../res/images/ic_up_pressed.png')
            : require('../../../res/images/ic_up.png');
        this.state = ({
            url: this.isTrending ? TRENDING_URL + this.props.projectModule.item.full_name
                : this.props.projectModule.item.html_url,
            inputTxt: '',
            title: this.isTrending ? this.props.projectModule.item.fullName
                : this.props.projectModule.item.full_name,
            isBack: false,
            rightButton: this.isTrending ? this.goodIcon
                : this.starIcon,
            theme: this.props.theme,

        });
    }

    componentDidMount(){
        this.backforward.componentDidMount();
    }
    componentWillUnmount(){
        this.backforward.componentWillUnmount();
    }
    onBackforward(e) {
        this.goBack();
        return true;
    }

    goBack() {
        if (this.state.isBack) {
            this.webView.goBack();
        } else {
            this.props.navigator.pop();
        }
    }

    onNavigationStateChange(result) {
        this.setState({
            // title: result.title,
            isBack: result.canGoBack,
        })
    }

    onPressRigthButton(favorite) {
        let like = !favorite;
        this.setFavoreteState(like)
    }

    /**
     * 处理点击右侧按钮操作 搜藏or点赞
     * @param isFavorite
     */
    setFavoreteState(isFavorite) {
        this.favorite = isFavorite;
        this.starIcon = isFavorite ? require('../../../res/images/ic_star.png')
            : require('../../../res/images/ic_unstar_transparent.png');
        this.goodIcon = isFavorite ? require('../../../res/images/ic_up_pressed.png')
            : require('../../../res/images/ic_up.png');
        this.setState({
            rightButton: this.isTrending ? this.goodIcon
                : this.starIcon,
        });

        //改变在数据库中存储的状态
        this.updateFavoriteStateInSql(this.props.projectModule.item, this.favorite);
    }

    updateFavoriteStateInSql(item, isFavorite) {
        //因为在最热中item有id字段，在热搜模块没有该字段
        const id = this.isTrending ? item.fullName : item.id.toString();
        if (isFavorite)
            this.favoriteDao.savaFavoriteItem(id, JSON.stringify(item));
        else this.favoriteDao.removeFavoriteItem(id)
    }

    getRightButton() {
        return <TouchableOpacity onPress={() => this.onPressRigthButton(this.favorite)}>
            <Image
                style={styles.img}
                source={this.state.rightButton}
            />
        </TouchableOpacity>
    }

    render() {
        return <View style={styles.container}>
            <NavigationBarComponent
                title={this.state.title}
                style={this.state.theme.styles.navBar}
                statusBar={{backgroundColor: this.state.theme.themeColor}}
                leftButton={NavigationBarUtil.getLeftButton(() => {
                    this.goBack();
                })}
                rightButton={this.getRightButton()}
            />

            <WebView
                //通过这种方法，相当于拿到了组件的对象
                ref={webView => this.webView = webView}
                style={styles.container}
                source={{uri: this.state.url}}
                onNavigationStateChange={result => {
                    this.onNavigationStateChange(result)
                }}
                startInLoadingState={true}
            />
        </View>

    }
}

const styles = StyleSheet.create(
    {
        container: {
            flex: 1,
        },

        view_top: {
            margin: 5,
            flexDirection: 'row',
            alignItems: 'center',

        },
        text: {
            marginHorizontal: 10,
            fontSize: 16,
            color: 'black',
            alignSelf: 'center',
        },
        img: {
            width: 20,
            height: 20,
            margin: 10,
            tintColor: 'white',
        },
    }
);